<script setup lang="ts">
import draggable from "vuedraggable";
import {formItems, elementPlusLayoutItems} from "./../element-plus/itemList.ts";
import Icon from "../icon/icon.vue";
import designer from "./designer.vue"
import {ref} from "vue";
import {deepClone, jsonClone} from "@/utils";
import {getSimpleId, setTableId} from "@/utils/idGenerate.ts";
import SfcDialog from "@/components/formDesigner/dialog/SfcDialog.vue";
import {tempActiveItem} from "@/components/formDesigner/select.ts";


const onStart = () => {
  console.log("onStart");
};
const designList = ref([]);
const activeData = ref<any>({});
const designerRef = ref<any>(null)
const SfcDialogRef = ref<any>(null)
const tempActiveData = ref<any>({});

const layoutItems = ref(elementPlusLayoutItems)

/**
 * 拖拽结束后函数
 * @param obj
 */
const onEnd = (obj: any) => {
  console.log("onEnd", obj)
  if (obj.from !== obj.to) {
    activeData.value = tempActiveData.value;
    designerRef.value.setActiveItem(activeData.value);
    if (obj.to.className.indexOf('row-drag') < 0) {
      console.log("加入新的元素", designList.value)
      designList.value.push(activeData.value)
      console.log("加入新的元素后", designList.value)
    }
  } else {
    designerRef.value.setActiveItem({});
  }
};

/**
 * 点击添加组件到对应的设计器中
 * @param element
 */
const addComponent = (element: any) => {

};

/**
 * 将组件进行克隆
 * @param origin
 */
const cloneComponent = (origin: any) => {
  console.log("cloneComponent", origin);
  let clone: any = {};
  clone = deepClone(origin);
  if (!clone.layout) clone.layout = 'colItem';
  if (clone.layout === 'colItem' || clone.layout === 'dynamicItem') {
    let uId = 'fd_' + getSimpleId();
    clone.id = uId;
    clone._id = uId;
    tempActiveData.value = clone;
    tempActiveItem.value = clone;
  } else if (clone.layout === 'rowItem') {
    let uId = 'row_' + getSimpleId();
    clone.id = uId;
    clone._id = uId;
    tempActiveData.value = clone;
    tempActiveItem.value = clone;
  } else if (clone.layout === 'tableItem') {
    let uId = 'table_' + getSimpleId();
    clone.id = uId;
    clone._id = uId;
    //增加td默认的id
    setTableId(clone);
    tempActiveData.value = clone;
    tempActiveItem.value = clone;
  }
  // 设置正在活动的组件
  designerRef.value.setActiveItem(tempActiveData);
};


/**
 * 表单配置
 */
const formConfig = ref({
  version: '0.5',
  formRef: 'formRef',
  formModel: 'formData',
  rules: 'rules',
  size: 'default',
  labelPosition: 'right',
  labelWidth: 80,
  formRules: 'rules',
  gutter: 15,
  disabled: false,
  dynamicTableAllowed: true
});
const handlerUpdateJSON = (json) => {
  console.log(json);
};
</script>

<template>
  <div class="container">
    <el-header class="header">
      <div class="logo">FormDesignerVue3</div>
      <div class="content">
        <el-space>
          <el-button type="primary" @click="() => {
              SfcDialogRef.open(formConfig, designList)
            }">生成 SFC
          </el-button>
        </el-space>
      </div>
    </el-header>

    <el-container>
      <!-- 左侧拖拽组件  -->
      <div class="left-board">
        <el-scrollbar class="left-scrollbar">
          <div class="components-list">
            <div class="components-title">常用组件</div>
            <draggable
                class="components-draggable"
                :list="formItems"
                :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                :clone="cloneComponent"
                draggable=".components-item"
                :sort="false"
                item-key="index"
                @start="onStart"
                @end="onEnd">
              <template #item="{ element }">
                <div class="components-item">
                  <div class="components-body">
                    <icon :code="element.compIcon" :text="element.compName"/>
                  </div>
                </div>
              </template>
            </draggable>


            <div class="components-title">布局组件</div>
            <draggable
                class="components-draggable"
                :list="layoutItems"
                :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                :clone="cloneComponent"
                draggable=".components-item"
                :sort="false"
                item-key="index"
                @start="onStart"
                @end="onEnd"
            >
              <template #item="{ element }">
                <div class="components-item">
                  <div class="components-body">
                    <icon :code="element.compIcon" :text="element.compName" />
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </el-scrollbar>
      </div>
      <!-- 设计器    -->
      <designer
          ref="designerRef"
          :list="designList"
          v-model:formConf="formConfig"
          @updateJSON="handlerUpdateJSON"
          v-model:activeItem="activeData"
      />
    </el-container>
    <SfcDialog ref="SfcDialogRef"></SfcDialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 0;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .logo {
      width: 260px;
      min-width: 260px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
    }

    .content {
      flex: 1;
      display: flex;
      align-items: center;
    }

  }

}

</style>
